<<<<<<< HEAD
/* * @Author: Zhengxuan Ye * @Date: 2025-05-06 21:27:36 * @Last Modified by: Zhengxuan Ye * @Last
Modified time: 2025-05-08 09:42:23 */
=======
/*
 * @Author: Zhengxuan Ye
 * @Date: 2025-05-06 21:27:36
 * @Last Modified by:   Zhengxuan Ye
 * @Last Modified time: 2025-05-06 21:27:36
 */
>>>>>>> ba93636 (前端建设完成)

<template>
  <div class="heritage-detail">
    <div class="container">
      <!-- 面包屑导航 -->
      <div class="breadcrumbs">
        <router-link to="/">首页</router-link> &gt;
        <router-link to="/heritage-list">遗产名录</router-link> &gt;
        <span>{{ heritage.name }}</span>
      </div>

      <!-- 加载中显示 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>正在加载遗产信息...</p>
      </div>

      <!-- 主要内容区 -->
      <div v-else class="heritage-content">
        <!-- 遗产标题信息 -->
        <div class="heritage-header">
          <h1>{{ heritage.name }}</h1>
          <div class="heritage-meta">
            <div class="heritage-meta-item">
              <span class="meta-label">所在地区:</span>
              <span class="meta-value">{{ heritage.location }}</span>
            </div>
            <div class="heritage-meta-item">
              <span class="meta-label">类别:</span>
              <span class="meta-value">{{ getCategoryName(heritage.categoryId) }}</span>
            </div>
            <div class="heritage-meta-item">
              <span class="meta-label">级别:</span>
              <span :class="['meta-value', 'level-badge', `level-${heritage.level}`]">
                {{ getLevelText(heritage.level) }}
              </span>
            </div>
            <div class="heritage-meta-item">
              <span class="meta-label">认定时间:</span>
              <span class="meta-value">{{ heritage.recognizedDate }}</span>
            </div>
          </div>
        </div>

        <!-- 遗产详情主体 -->
        <div class="heritage-body">
          <div class="heritage-main">
            <!-- 图片展示 -->
            <div class="heritage-images">
              <div class="main-image-placeholder">
                <!-- 主图片位置 -->
                {{ heritage.name }}主图片
              </div>
              <div class="thumbnail-list">
                <div v-for="index in 4" :key="index" class="thumbnail-placeholder">
                  <!-- 缩略图位置 -->
                  缩略图{{ index }}
                </div>
              </div>
            </div>

            <!-- 详细介绍 -->
            <div class="heritage-sections">
              <div class="heritage-section">
                <h2 class="section-title">简介</h2>
                <div class="section-content">
                  <p>{{ heritage.description }}</p>
                </div>
              </div>

              <div class="heritage-section">
                <h2 class="section-title">历史渊源</h2>
                <div class="section-content">
                  <p>{{ heritage.history || '暂无历史渊源信息' }}</p>
                </div>
              </div>

              <div class="heritage-section">
                <h2 class="section-title">工艺特点</h2>
                <div class="section-content">
                  <p>{{ heritage.features || '暂无工艺特点信息' }}</p>
                </div>
              </div>

              <div class="heritage-section">
                <h2 class="section-title">传承情况</h2>
                <div class="section-content">
                  <p>{{ heritage.inheritance || '暂无传承情况信息' }}</p>
                </div>
              </div>
            </div>

            <!-- 社交互动部分 -->
            <div class="social-interaction">
              <div class="interaction-header">
                <h2 class="section-title">互动交流</h2>
                <p v-if="!isLoggedIn" class="login-tip">
                  <router-link to="/login">登录</router-link>后可参与点赞、评论和分享
                </p>
              </div>

              <div class="interaction-buttons">
                <button
                  @click="handleLike"
                  :class="['interaction-btn', 'like-btn', { active: likeStatus.liked }]"
                  :disabled="!isLoggedIn"
                >
                  <span class="icon">👍</span>
                  <span class="label">{{ likeStatus.liked ? '已点赞' : '点赞' }}</span>
                  <span class="count">{{ likeStatus.count }}</span>
                </button>

                <button
                  @click="handleShare"
                  class="interaction-btn share-btn"
                  :disabled="!isLoggedIn"
                >
                  <span class="icon">🔗</span>
                  <span class="label">分享</span>
                  <span class="count">{{ sharesCount }}</span>
                </button>
              </div>

              <!-- 评论区域 -->
              <div class="comments-section">
                <h3>评论 ({{ comments.length }})</h3>

                <!-- 评论输入框 -->
                <div v-if="isLoggedIn" class="comment-form">
                  <textarea
                    v-model="commentContent"
                    placeholder="写下您的评论..."
                    rows="3"
                  ></textarea>
                  <button
                    @click="submitComment"
                    :disabled="!commentContent.trim() || commentLoading"
                    class="submit-comment-btn"
                  >
                    {{ commentLoading ? '提交中...' : '提交评论' }}
                  </button>
                </div>

                <!-- 评论列表 -->
                <div class="comments-list">
                  <div v-if="comments.length === 0" class="no-comments">
                    暂无评论，快来发表第一条评论吧！
                  </div>

                  <div v-else class="comment-items">
                    <div v-for="comment in comments" :key="comment.id" class="comment-item">
                      <div class="comment-header">
                        <strong class="comment-author">{{ comment.username }}</strong>
                        <span class="comment-time">{{ formatDate(comment.created_at) }}</span>
                      </div>
                      <div class="comment-body">
                        {{ comment.content }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 侧边栏 -->
          <div class="heritage-sidebar">
            <!-- 传承人信息 -->
            <div class="sidebar-box inheritors-box">
              <h3 class="sidebar-title">代表性传承人</h3>
              <ul class="inheritors-list">
                <li
                  v-for="inheritor in heritage.inheritors"
                  :key="inheritor.id"
                  class="inheritor-item"
                >
                  <div class="inheritor-image-placeholder">
                    <!-- 传承人图片位置 -->
                    {{ inheritor.name }}照片
                  </div>
                  <div class="inheritor-info">
                    <div class="inheritor-name">{{ inheritor.name }}</div>
                    <div class="inheritor-meta">{{ inheritor.level }}传承人</div>
                  </div>
                </li>
              </ul>
            </div>

            <!-- 保护单位 -->
            <div class="sidebar-box protection-box">
              <h3 class="sidebar-title">保护单位</h3>
              <div class="protection-info">
                <p>{{ heritage.protectionUnit || '暂无保护单位信息' }}</p>
              </div>
            </div>

            <!-- 相关遗产推荐 -->
            <div class="sidebar-box related-box">
              <h3 class="sidebar-title">相关遗产推荐</h3>
              <ul class="related-list">
                <li v-for="related in relatedHeritages" :key="related.id" class="related-item">
                  <router-link :to="`/heritage/${related.id}`" class="related-link">
                    <div class="related-image-placeholder">
                      <!-- 相关遗产文本占位符 -->
                      {{ related.name }}
                    </div>
                    <div class="related-name">{{ related.name }}</div>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { useInteractionStore } from '../stores/interaction'

export default {
  name: 'HeritageDetailView',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const userStore = useUserStore()
    const interactionStore = useInteractionStore()

    // 状态变量
    const loading = ref(true)
    const heritage = ref({})
    const relatedHeritages = ref([])
    const comments = ref([])
    const likeStatus = ref({ liked: false, count: 0 })
    const sharesCount = ref(0)
    const commentContent = ref('')
    const commentLoading = ref(false)

    // 计算属性
    const isLoggedIn = computed(() => {
      const loggedIn = userStore.isLoggedIn
      console.log('用户登录状态:', loggedIn)
      return loggedIn
    })
    const token = computed(() => {
      const userToken = userStore.token
      console.log('用户Token:', userToken ? '存在' : '不存在')
      return userToken
    })

    onMounted(async () => {
      const heritageId = parseInt(route.params.id)
      if (!heritageId) {
        router.push('/heritage-list')
        return
      }

      await loadHeritageData(heritageId)

      // 加载评论和互动数据
      await loadComments(heritageId)
      await loadLikeStatus(heritageId)
      await loadSharesCount(heritageId)
    })

    // 加载遗产详情数据
    const loadHeritageData = async (heritageId) => {
      loading.value = true

      try {
<<<<<<< HEAD
        // 使用模拟数据，但确保ID是数字类型
        const numericId = parseInt(heritageId)
        heritage.value = getHeritageDetail(numericId)
        relatedHeritages.value = getRelatedHeritages(numericId)
        console.log('加载的遗产ID:', numericId)
        console.log('加载的遗产详情:', heritage.value)
        console.log('加载的相关遗产:', relatedHeritages.value)
        loading.value = false
=======
        // 这里应该是实际的API调用
        // 为了演示，使用模拟数据
        setTimeout(() => {
          heritage.value = getHeritageDetail(heritageId)
          relatedHeritages.value = getRelatedHeritages(heritageId)
          console.log('加载的相关遗产:', relatedHeritages.value)
          loading.value = false
        }, 800)
>>>>>>> ba93636 (前端建设完成)
      } catch (error) {
        console.error('加载遗产数据失败:', error)
        loading.value = false
      }
    }

    // 检查点赞状态
    const loadLikeStatus = async (heritageId) => {
      try {
        // 确保使用正确的ID格式
        const numericId = parseInt(heritageId)
        console.log('加载点赞状态，遗产ID:', numericId)
        console.log('加载点赞状态，用户登录状态:', isLoggedIn.value)
        console.log('加载点赞状态，用户Token:', token.value)

        const status = await interactionStore.checkLikeStatus(
          numericId,
          isLoggedIn.value ? token.value : null,
        )
        console.log('获取到的点赞状态:', status)
        likeStatus.value = status
      } catch (error) {
        console.error('检查点赞状态失败:', error)
      }
    }

    // 加载评论
    const loadComments = async (heritageId) => {
      try {
        // 确保使用正确的ID格式
        const numericId = parseInt(heritageId)
        console.log('加载评论，遗产ID:', numericId)

        const result = await interactionStore.getComments(numericId)
        console.log('获取到的评论:', result)
        comments.value = result || []
      } catch (error) {
        console.error('加载评论失败:', error)
      }
    }

    // 加载分享数
    const loadSharesCount = async (heritageId) => {
      try {
        // 确保使用正确的ID格式
        const numericId = parseInt(heritageId)
        console.log('加载分享数，遗产ID:', numericId)

        const count = await interactionStore.getSharesCount(numericId)
        console.log('获取到的分享数:', count)
        sharesCount.value = count
      } catch (error) {
        console.error('加载分享数失败:', error)
      }
    }

    // 处理点赞
    const handleLike = async () => {
      console.log('点赞按钮点击，登录状态:', isLoggedIn.value)

      if (!isLoggedIn.value) {
        console.log('用户未登录，跳转到登录页面')
        router.push({ name: 'login', query: { redirect: route.fullPath } })
        return
      }

      try {
        // 确保使用正确的ID格式
        const heritageId = parseInt(route.params.id)
        console.log('发送点赞请求，遗产ID:', heritageId, '用户Token:', token.value)

        // 使用路由参数中的ID而不是heritage对象中的ID
        const status = await interactionStore.toggleLike(heritageId, token.value)
        console.log('点赞响应:', status)
        likeStatus.value = status
      } catch (error) {
        console.error('点赞操作失败:', error)
      }
    }

    // 处理分享
    const handleShare = async () => {
      console.log('分享按钮点击，登录状态:', isLoggedIn.value)

      if (!isLoggedIn.value) {
        console.log('用户未登录，跳转到登录页面')
        router.push({ name: 'login', query: { redirect: route.fullPath } })
        return
      }

      try {
        // 确保使用正确的ID格式
        const heritageId = parseInt(route.params.id)

        // 复制链接到剪贴板
        const url = window.location.href
        await navigator.clipboard.writeText(url)
        console.log('链接已复制到剪贴板:', url)

        // 记录分享
        console.log('发送分享请求，遗产ID:', heritageId)
        const count = await interactionStore.sharePage(heritageId, token.value)
        console.log('分享响应:', count)
        sharesCount.value = count

        alert('链接已复制到剪贴板，可以分享给朋友了')
      } catch (error) {
        console.error('分享失败:', error)
        alert('分享失败，请手动复制链接')
      }
    }

    // 提交评论
    const submitComment = async () => {
      console.log('提交评论，登录状态:', isLoggedIn.value)

      if (!isLoggedIn.value) {
        console.log('用户未登录，跳转到登录页面')
        router.push({ name: 'login', query: { redirect: route.fullPath } })
        return
      }

      if (!commentContent.value.trim()) return

      commentLoading.value = true
      try {
        // 确保使用正确的ID格式
        const heritageId = parseInt(route.params.id)
        console.log('发送评论请求，遗产ID:', heritageId, '评论内容:', commentContent.value)

        // 使用路由参数中的ID而不是heritage对象中的ID
        const result = await interactionStore.addComment(
          heritageId,
          commentContent.value,
          token.value,
        )
        console.log('评论响应:', result)

        // 清空评论内容
        commentContent.value = ''

        // 重新加载评论
        await loadComments(heritageId)
      } catch (error) {
        console.error('提交评论失败:', error)
      } finally {
        commentLoading.value = false
      }
    }

    // 格式化日期
    const formatDate = (dateString) => {
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
      })
    }

    // 获取分类名称
    const getCategoryName = (categoryId) => {
      const categories = [
        { id: 1, name: '传统技艺' },
        { id: 2, name: '传统音乐' },
        { id: 3, name: '传统舞蹈' },
        { id: 4, name: '传统戏剧' },
        { id: 5, name: '传统美术' },
        { id: 6, name: '传统医药' },
        { id: 7, name: '民俗' },
        { id: 8, name: '传统体育、游艺与杂技' },
      ]

      const category = categories.find((c) => c.id === categoryId)
      return category ? category.name : '未分类'
    }

    // 获取级别文本
    const getLevelText = (level) => {
      switch (level) {
        case 'national':
          return '国家级'
        case 'provincial':
          return '省级'
        case 'unesco':
          return '联合国教科文组织名录'
        default:
          return ''
      }
    }

    // 获取遗产详情（模拟数据）
    const getHeritageDetail = (id) => {
      // 这里应该是从API获取的真实数据
      const heritages = [
        {
          id: 101,
          name: '景泰蓝制作技艺',
          categoryId: 1,
          regionId: 1,
          location: '北京',
          level: 'national',
          recognizedDate: '2006年5月20日',
          description:
            '景泰蓝是中国传统的金属工艺品，以铜胎掐丝，填充色釉，经过烧制形成的工艺品，具有悠久的历史，被誉为"中华国粹"，是中国工艺美术的瑰宝。',
          history:
            '景泰蓝始于元代，盛于明代景泰年间（1450-1456年），因此得名"景泰蓝"。明代景泰蓝制作已经很精美，到了清代，景泰蓝工艺达到了鼎盛时期，出现了许多精美绝伦的作品。',
          features:
            '景泰蓝制作工艺复杂，主要包括胎型制作、掐丝、点蓝、烧制、磨光和镀金等工序。作品色彩丰富，图案精美，多以吉祥图案为主题，寓意美好。',
          inheritance:
            '景泰蓝作为国家级非物质文化遗产，目前有多位代表性传承人致力于其保护和传承。同时，北京市设立了景泰蓝传习所，培养新一代的景泰蓝工艺师。',
          protectionUnit: '北京市非物质文化遗产保护中心',
          inheritors: [
            {
              id: 1001,
              name: '张同禄',
              level: '国家级',
            },
            {
              id: 1002,
              name: '李秀芬',
              level: '市级',
            },
          ],
        },
        {
          id: 102,
          name: '苏州刺绣',
          categoryId: 1,
          regionId: 3,
          location: '江苏苏州',
          level: 'unesco',
          recognizedDate: '2006年5月20日（国家级）、2009年9月30日（联合国）',
          description:
            '苏绣是中国四大名绣之一，以其精细的针法、色彩典雅、图案秀丽闻名于世，具有"平、细、和、密、顺、光"的特点。',
          history:
            '苏绣历史悠久，可追溯到春秋战国时期，距今已有2000多年历史。明清时期是苏绣发展的鼎盛时期，清代苏绣成为宫廷御用品，声名远播。',
          features:
            '苏绣针法精细，一般有40多种基本针法，常用的有20多种。以"双面绣"最为著名，正反两面均可观赏，针脚一致，色彩一样，图案相同。',
          inheritance:
            '目前苏绣有多位国家级、省级和市级代表性传承人，并设立了专门的苏绣研究所和传习基地，致力于苏绣的保护和传承。',
          protectionUnit: '苏州市刺绣研究所、江苏省非物质文化遗产保护中心',
          inheritors: [
            {
              id: 1003,
              name: '姚建萍',
              level: '国家级',
            },
            {
              id: 1004,
              name: '沈寿珍',
              level: '省级',
            },
          ],
        },
      ]

      return heritages.find((h) => h.id === id) || {}
    }

    // 获取相关遗产（模拟数据）
    const getRelatedHeritages = (currentId) => {
      // 这里应该是从API获取的真实数据
      const allHeritages = [
        {
          id: 101,
          name: '景泰蓝制作技艺',
          categoryId: 1,
          level: 'national',
        },
        {
          id: 102,
          name: '苏州刺绣',
          categoryId: 1,
          level: 'unesco',
        },
        {
          id: 103,
          name: '京剧',
          categoryId: 4,
          level: 'national',
        },
        {
          id: 104,
          name: '黄梅戏',
          categoryId: 4,
          level: 'national',
        },
        {
          id: 106,
          name: '广绣',
          categoryId: 1,
          level: 'national',
        },
        {
          id: 107,
          name: '昆曲',
          categoryId: 4,
          level: 'unesco',
        },
        {
          id: 108,
          name: '蜀锦织造技艺',
          categoryId: 1,
          level: 'national',
        },
        {
          id: 109,
          name: '贵州苗绣',
          categoryId: 1,
          level: 'national',
        },
      ]

      // 简化筛选逻辑
      const result = allHeritages.filter((h) => h.id !== currentId).slice(0, 3)

      return result
    }

    return {
      loading,
      heritage,
      relatedHeritages,
      comments,
      likeStatus,
      sharesCount,
      commentContent,
      commentLoading,
      isLoggedIn,
      handleLike,
      handleShare,
      submitComment,
      formatDate,
      getCategoryName,
      getLevelText,
    }
  },
}
</script>

<style scoped>
.heritage-detail {
  padding: 40px 0;
}

/* 面包屑导航 */
.breadcrumbs {
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #666;
}

.breadcrumbs a {
  color: var(--primary-color);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* 加载中提示 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #666;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 遗产标题信息 */
.heritage-header {
  margin-bottom: 30px;
}

.heritage-header h1 {
  font-size: 2.2rem;
  color: var(--primary-color);
  margin-bottom: 15px;
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.heritage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  background-color: #f8f8f8;
  padding: 15px;
  border-radius: var(--border-radius);
}

.heritage-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.meta-label {
  font-weight: bold;
  color: #555;
}

.level-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.85rem;
}

.level-national {
  background-color: #f0f8ff;
  color: #1e90ff;
}

.level-provincial {
  background-color: #f0fff0;
  color: #2e8b57;
}

.level-unesco {
  background-color: #fff0f5;
  color: #c71585;
}

/* 遗产详情主体 */
.heritage-body {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 30px;
}

.heritage-main {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  overflow: hidden;
}

/* 图片展示 */
.heritage-images {
  margin-bottom: 20px;
}

.main-image-placeholder {
  height: 400px;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 1.2rem;
}

.thumbnail-list {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding: 0 20px;
}

.thumbnail-placeholder {
  width: 80px;
  height: 80px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  color: #777;
  font-size: 0.8rem;
  transition: var(--transition);
}

.thumbnail-placeholder:hover {
  background-color: #e0e0e0;
}

/* 详细介绍部分 */
.heritage-sections {
  padding: 20px;
}

.heritage-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 1.4rem;
  color: var(--dark-color);
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-color);
  display: inline-block;
}

.section-content {
  line-height: 1.8;
  color: #444;
}

/* 社交互动部分 */
.social-interaction {
  padding: 20px;
  background-color: #f9f9f9;
  border-top: 1px solid #eee;
}

.interaction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.login-tip {
  font-size: 0.9rem;
  color: #666;
}

.login-tip a {
  color: var(--primary-color);
  text-decoration: none;
}

.login-tip a:hover {
  text-decoration: underline;
}

.interaction-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.interaction-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--border-color);
  background-color: white;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
}

.interaction-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.interaction-btn .icon {
  font-size: 1.2rem;
}

.interaction-btn .count {
  background-color: #f1f1f1;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.8rem;
}

.like-btn:hover:not(:disabled) {
  background-color: #fef2f2;
  border-color: #fecaca;
}

.like-btn.active {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: var(--primary-color);
}

.share-btn:hover:not(:disabled) {
  background-color: #edf5ff;
  border-color: #bfdbfe;
}

/* 评论区域 */
.comments-section {
  margin-top: 20px;
}

.comments-section h3 {
  margin-bottom: 20px;
  font-size: 1.2rem;
  color: var(--dark-color);
}

.comment-form {
  margin-bottom: 30px;
}

.comment-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  resize: vertical;
  margin-bottom: 15px;
  font-family: inherit;
  font-size: 1rem;
}

.comment-form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(197, 48, 48, 0.1);
}

.submit-comment-btn {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
}

.submit-comment-btn:hover:not(:disabled) {
  background-color: #b42c2c;
}

.submit-comment-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.no-comments {
  text-align: center;
  padding: 30px 0;
  color: #666;
  background-color: #f9f9f9;
  border-radius: var(--border-radius);
}

.comment-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.comment-author {
  color: var(--dark-color);
}

.comment-time {
  font-size: 0.85rem;
  color: #888;
}

.comment-body {
  line-height: 1.6;
}

/* 侧边栏 */
.heritage-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-box {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 20px;
}

.sidebar-title {
  font-size: 1.2rem;
  color: var(--primary-color);
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

/* 传承人信息 */
.inheritors-list {
  list-style: none;
  padding: 0;
}

.inheritor-item {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.inheritor-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.inheritor-image-placeholder {
  width: 60px;
  height: 60px;
  background-color: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 0.7rem;
  text-align: center;
}

.inheritor-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.inheritor-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.inheritor-meta {
  font-size: 0.85rem;
  color: #666;
}

/* 相关遗产推荐 */
.related-box {
  padding: 20px;
  background-color: #f9f9f9;
  border-top: 1px solid #eee;
}

.related-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.related-item {
  margin-bottom: 0;
}

.related-link {
  text-decoration: none;
  color: var(--dark-color);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition);
}

.related-link:hover {
  transform: translateY(-3px);
}

.related-image-placeholder {
  height: 80px;
  background-color: #f0f0f0;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 0.7rem;
  text-align: center;
  padding: 5px;
}

.related-name {
  font-size: 0.9rem;
  text-align: center;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .heritage-body {
    grid-template-columns: 1fr;
  }

  .heritage-main {
    order: 1;
  }

  .heritage-sidebar {
    order: 2;
  }
}

@media (max-width: 768px) {
  .heritage-header h1 {
    font-size: 1.8rem;
  }

  .heritage-meta {
    flex-direction: column;
    gap: 10px;
  }

  .main-image-placeholder {
    height: 250px;
  }

  .thumbnail-list {
    justify-content: center;
  }
}
</style>
